import React from 'react'
import {TabView,TabPanel} from 'primereact/tabview'
import {InputText} from 'primereact/inputtext'
import {Button} from 'primereact/button'

class RamDetails extends React.Component{
  constructor(){
    super()

    this.state={
      ramPrice:0.325468744
    }
  }

  render(){
    return (
      <div className="p-g">
        <div className="p-g-12">
          <div>接收者</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入接收者账户" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="选择" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <div>购买内存(1.000EOS)</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入购买的额度" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="购买" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <div>出售内存(492bytes)</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入出售的数量" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="出售" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <p>· 当前内存价格：{this.state.ramPrice+'EOS/KB'}</p>
          <p>· 内存资源，可以使用EOS买入，也可以卖出获得EOS</p>
        </div>

      </div>
    )
  }
}

class CpuDetails extends React.Component{
  constructor(){
    super()

    this.state={
      ramPrice:0.325468744
    }
  }

  render(){
    return (
      <div className="p-g">
        <div className="p-g-12">
          <div>接收者</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入接收者账户" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="选择" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <div>资产抵押(1.000EOS)</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入抵押金额" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="抵押" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <div>赎回抵押(EOS)</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入赎回金额" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="赎回" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <div>抵押方式</div>
        </div>
        <div className="p-g-6">
          <span className="p-fluid">
            <Button label="租借" className="p-button-raised p-button-rounded p-button-secondary" />
          </span>
        </div>
        <div className="p-g-6">
          <span className="p-fluid">
            <Button label="过户" className="p-button-raised p-button-rounded" />
          </span>
        </div>

        <div className="p-g-12">
          <p>· CPU资源可以通过抵押EOS来获取，抵押的EOS可以赎回</p>
          <p>· 没有CPU资源则无法使用区块系统</p>
          <p>· 当前内存价格：{this.state.ramPrice+'EOS/KB'}</p>
        </div>

      </div>
    )
  }
}

class NetDetails extends React.Component{
  constructor(){
    super()

    this.state={
      netPrice:0.0005
    }
  }

  render(){
    return (
      <div className="p-g">
        <div className="p-g-12">
          <div>接收者</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入接收者账户" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="选择" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <div>资产抵押(1.000EOS)</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入抵押金额" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="抵押" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <div>取消抵押(EOS)</div>
        </div>
        <div className="p-g-10">
          <span className="p-fluid">
            <InputText placeholder="请输入出售金额" />
          </span>
        </div>
        <div className="p-g-2">
          <Button label="赎回" className="p-button-success" />
        </div>

        <div className="p-g-12">
          <div>抵押方式</div>
        </div>
        <div className="p-g-6">
          <span className="p-fluid">
            <Button label="租借" className="p-button-raised p-button-rounded p-button-secondary" />
          </span>
        </div>
        <div className="p-g-6">
          <span className="p-fluid">
            <Button label="过户" className="p-button-raised p-button-rounded" />
          </span>
        </div>

        <div className="p-g-12">
          <p>· 网络资源价格：{this.state.netPrice+'EOS/KB/Day'}</p>
          <p>· 获取资源需要抵押EOS</p>
          <p>· 抵押的EOS可以撤销抵押，并于3天后退回</p>
        </div>

      </div>
    )
  }
}

class Resources extends React.Component{
  constructor(){
    super()

    this.state={
      activeIndex:0
    }
  }

  render(){
    return (
      <TabView activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({activeIndex: e.index})}>
        <TabPanel header="内存">
          <RamDetails />
        </TabPanel>
        <TabPanel header="CPU">
          <CpuDetails />
        </TabPanel>
        <TabPanel header="网络">
          <NetDetails />
        </TabPanel>
      </TabView>
    )
  }
}

export default Resources